<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年7月12日 上午11:07:30
 */
import $router from '~/router'
import {onBeforeRouteUpdate} from "vue-router";
import {
  getAuthListAction,
  deleteAdminAuthAction,
  createAdminAuthAction,
  updateAdminAuthAction,
  getAuthAllListAction,
  $response
} from '~/api'

const default_page_options = {
  id: 0
}
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})
const auth_all_list = ref({
  page: [],
  api: []
})
const getAuthAllList = async () => {
  const response = await getAuthAllListAction()
  $response(response, () => {
    auth_all_list.value = response.data
  })
}
const auth_list = ref([])
const getAuthList = async () => {
  const response = await getAuthListAction()
  $response(response, () => {
    auth_list.value = response.data.list
    pushInfo()
  })
}
const auth_info = ref({
  id: 0,
  name: '',
  auth_ids: [],
  remark: '',
})
const pushInfo = () => {
  if (page_options.value.id === 0) return auth_info.value = {
    id: 0,
    name: '',
    auth_ids: [],
    remark: '',
  }
  let list = auth_list.value
  for (let i in list) {
    if (list[i].id === page_options.value.id) {
      return auth_info.value = {
        id: list[i].id,
        name: list[i].name,
        auth_ids: list[i].auth_ids_turn,
        remark: list[i].remark,
      }
    }
  }
}

const routerChange = (query) => {
  page_options.value = {
    id: Number(query.id) || default_page_options.id
  }
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
  getAuthList()
  getAuthAllList()
})
const authIdUpdate = (id, push = true) => {
  page_options.value.id = id
  $router.push({
    name: 'admin-auth',
    query: {id}
  })
  if (push) pushInfo()
}
const saveClick = async () => {
  let response
  if (auth_info.value.id === 0) {
    response = await createAdminAuthAction(auth_info.value)
  } else {
    response = await updateAdminAuthAction(auth_info.value)
  }
  $response(response, () => {
    if (page_options.value.id === 0) authIdUpdate(response.data.id, false)
    getAuthList()
    window.$message().success(response.message)
  })
}
const deleteClick = async () => {
  const $dialog = window.$dialog.warning({
    title: '确认删除该权限？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      $dialog.destroy()
      const response = await deleteAdminAuthAction([auth_info.value.id])
      $response(response, () => {
        authIdUpdate(0, false)
        getAuthList()
        window.$message().success(response.message)
      })
    },
    onNegativeClick: () => {
    }
  })
}
</script>
<template>
  <n-card title="权限管理">
    <n-space>
      <div>
        <n-list class="auth_list_wrapper" bordered>
          <template #header>
            <n-radio-group v-model:value="page_options.id" @update:value="authIdUpdate" name="auth_id">
              <n-radio :value="0">新建权限</n-radio>
            </n-radio-group>
          </template>
          <n-list-item v-for="(i,k) in auth_list" :key="k">
            <n-thing>
              <n-radio-group v-model:value="page_options.id" @update:value="authIdUpdate" name="auth_id">
                <n-radio :value="i.id">{{ i.name }}</n-radio>
              </n-radio-group>
            </n-thing>
          </n-list-item>
        </n-list>
      </div>
      <div>
        <n-card class="auth_data_wrapper" :title="`${page_options.id===0?'新建':'编辑'}权限`">
          <div>
            <n-space align="center">
              <div>
                <n-tag>名称</n-tag>
              </div>
              <div>
                <n-input class="name_input_wrapper" v-model:value="auth_info.name"></n-input>
              </div>
            </n-space>
          </div>
          <div mt-2>
            <n-space align="center">
              <div>
                <n-tag>备注</n-tag>
              </div>
              <div>
                <n-input class="remark_input_wrapper" v-model:value="auth_info.remark"></n-input>
              </div>
            </n-space>
          </div>
          <n-table mt-2 :single-line="false">
            <thead>
            <tr>
              <th>权限名称</th>
              <th>子权限</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(i,k) in auth_all_list.page" :key="k">
              <td>{{ i.title }}</td>
              <td>
                <n-checkbox-group v-model:value="auth_info.auth_ids">
                  <n-space>
                    <n-checkbox v-for="(ii,kk) in i.children" :key="kk" :value="ii.id" :label="ii.title"/>
                  </n-space>
                </n-checkbox-group>
              </td>
            </tr>
            <tr v-for="(i,k) in auth_all_list.api" :key="k">
              <td>{{ i.title }}</td>
              <td>
                <n-checkbox-group v-model:value="auth_info.auth_ids">
                  <n-space>
                    <n-checkbox v-for="(ii,kk) in i.children" :key="kk" :value="ii.id" :label="ii.title"/>
                  </n-space>
                </n-checkbox-group>
              </td>
            </tr>
            </tbody>
          </n-table>
          <div mt-2>
            <n-button @click="saveClick()" type="primary">保存</n-button>
            <n-button v-if="page_options.id!==0" @click="deleteClick()" ml-2 type="error">删除</n-button>
          </div>
        </n-card>
      </div>
    </n-space>
  </n-card>
</template>
<style scoped>
.remark_input_wrapper {
  width: 400px;
}

.name_input_wrapper {
  width: 200px;
}

.auth_list_wrapper {
  width: 200px;
}

.auth_data_wrapper {
  width: 1000px;
}
</style>
<route>
{"meta":{"title":"权限管理","icon":"i-ic-baseline-admin-panel-settings"}}
</route>

